<template>
  <div class="wifi-signal relative">
    <page-loading></page-loading>
    <div class="form-wrap mb10">
      <div class="vertical-align-flex">
        <div class="field">{{field}}：</div>
        <div class="value">
          <el-select class="select-middle" v-model="selected" :popper-append-to-body="false">
            <el-option v-for="(item, idx) in wifi_power_select"
            :key="idx" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
      </div>
      <div class="value alone-right">
        <div class="btn btn-blue" @click="set_wifi_power">{{$t('btn.save')}}</div>
      </div>
    </div>
    <div :class="['toolbar', {'text-green': selected=='low', 'text-red': selected=='high'}]">
      {{toolbar}}
    </div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        wifi_power_select: this.$t('wifi.signal.wifi_select'),
        field: this.$t('wifi.signal.field'),
        tips: this.$t('wifi.signal.toolbar'),
        selected: '',
      }
    },
    computed:{
      toolbar: {
        get(){
          this.selected;
          switch(this.selected){
            case 'low':
            return this.tips[0]
            break
            case 'medium':
            return this.tips[1]
            break
            case 'high':
            return this.tips[2]
            break
            default:
            return this.tips[1]
          }
        }
      },
    },
    methods: {
      get_wifi_power(){
        this.$req.get('/webapi?op=get_wifi_power').then(res=> {
          this.selected = res.wifi_power
        })
      },
      set_wifi_power(){
        let params = { wifi_power: this.selected, }
        this.proxy_req('get', '/webapi?op=set_wifi_power', params, res=> {
          console.log(res)
        }, true, )
        // let loading = this.createLoading()
        // this.$req.get('/webapi?op=set_wifi_power', {
        //   params: {
        //     wifi_power: this.selected,
        //   }
        // }).then(res=> {
        //   console.log(res)
        //   this.$message.success(res.re)
        // }).finally(()=> {
        //   loading.close()
        // })
      },
    },
    created(){
      this.$bus.emit('changeTab', 3)
      this.get_wifi_power()
    }
  }
</script>

<style lang="scss" scoped>

</style>
